<template>
  <div> 
    <div class="blue-line mb-15">{{ $t('other.monitorMange') }}</div>
    <a-spin :spinning="confirmLoading">
      <a-tree v-if="treeData.length" size="large" :field-names="fieldNames" :tree-data="treeData" show-icon default-expand-all class="video-center--side-tree depart-side-tree" style="width: 220px"   :blockNode="true">
        <template #title="{ hangerLineNo, videoVOList, lineStationNo, status, deviceStatus, id}">
          <div class="tree-title">  
            <span class="title-name">
              <span v-if="videoVOList?.length">{{ hangerLineNo }}</span>
              <span v-else :class="deviceStatus? status ? 'hide-tree-text' : 'text-primary' : 'text-red' ">
                <video-camera-filled class="mr-10"/>
                <span class="station-name">{{ lineStationNo}}</span>
              </span>
            </span> 
            <span class="right-operate" >
              <a-space>
                <eye-invisible-outlined v-if="!status" @click.stop="toggleVideo(1, hangerLineNo, id, videoVOList?.length )"/>
                <eye-outlined v-else  @click.stop="toggleVideo(0, hangerLineNo, id, videoVOList?.length)"/>
              </a-space>
            </span>
          </div>
        </template>
      </a-tree>
    </a-spin>
  </div>

</template>
<script setup name="sideTree">
import { find } from 'lodash'
import { onMounted, ref } from 'vue'
import axios from '@/utils/request'
import { EyeOutlined, EyeInvisibleOutlined, VideoCameraFilled  } from '@ant-design/icons-vue' 
import { message } from 'ant-design-vue'

const emits = defineEmits(['toggleVideo', 'onEdit', 'onDelete'])
let confirmLoading = ref(false)
 
const fieldNames = { children: 'videoVOList'  }
let treeData = ref([])


const getData = async()=> {
  try { 
    let res = await axios.postAction('/api/monitor/video/list')
    if(res.success) treeData.value = res.data
    // console.log("🚀 ~ ~~~~~~~~:", treeData.value)
  } catch {
    treeData.value = [] 
  }
}
const toggleVideo = async (status, hangerLineNo, id, isParent) => {
  // console.log('___++++++++',hangerLineNo, isParent, isParent ? getChildIds(hangerLineNo) : [id]) 
  let idObjAry = (isParent ? getChildIds(hangerLineNo) : [id]).map(i=> ({id: i,status }))
  // console.log(idObjAry)
  try { 
    const res = await axios.postAction('/api/monitor/video/updateStatu', {hideDTOList: idObjAry})
    message[res?.success ? 'success': 'warning'](res.msg)
    confirmLoading.value = false
    getData()
    emits('toggleVideo')
  } catch {
    confirmLoading.value = false
  }
}
const getChildIds = (parentId) => {
  console.log('______hangerLineNo',parentId);
  let parentInfo = find(treeData.value, (item)=> item.hangerLineNo == parentId)
  // console.log("🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀", parentInfo)
  return parentInfo ? parentInfo.videoVOList.map(i=> i.id) : []
}
onMounted(async () =>{
  await getData()
})
</script>
